<template>
  <div class="wrap">
    <img class="audio-icon" v-if="globalAudioType=='play'" src="/static/playIcon.png" alt="" @click="stopAudio()">
    <img class="audio-icon" v-else src="/static/stopIcon.png" alt="" @click="playAudio()">
    <img class="logo" src="/static/logo.png" alt="">
    <!-- <form @submit="msgSubmit" report-submit="true"> -->
    <button plain="true" class="btn-box" @getuserinfo="getUserInfo($event)" open-type="getUserInfo" lang="zh_CN">
      <div class="btn-start">
        <div class="icon-a"></div>
        <div class="txt-nub">第
          <span v-if="initInfo">{{cardNumber}}</span>关</div>
      </div>
    </button>
    <!-- <button formType="submit" @getuserinfo="getUserInfo($event)" open-type="getUserInfo" lang="zh_CN">发送模板消息</button> -->
    <!-- </form> -->
    <button plain="true" class="btn-box" @click="toRank">
      <div class="btn-rank">
        <div class="icon-b"></div>
        <div class="txt-nub">
          <span v-if="initInfo">{{initInfo.relationNumber}}</span>个好友</div>
      </div>
    </button>
    <!-- <button plain="true" class="service" open-type="contact">联系客服</button> -->
    <overFriendBox v-if="showOverFriendBox" type='beOver' :queryInfo="queryInfo" @close="showOverFriendBox=false"></overFriendBox>
    <checkModel v-if="showCheckModel" @close="hideCheckModel"></checkModel>
    <!-- 小游戏入口 -->
    <img class="out-link" src="/static/xingyu.gif" alt="" @click="toGame">
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { shareInfo } from "@/config/shareInfo";
import overFriendBox from "@/components/overFriendBox";
import checkModel from "@/components/checkModel";

export default {
  onLoad() {
    this.scene = this.$root.$mp.appOptions.scene;
    this.setScene(this.scene);
  },
  onShareAppMessage: function(res) {
    let shareTickit = Math.ceil(Math.random() * 10000);
    let x = Math.ceil(Math.random() * 7);
    return {
      title: this.shareAppInfo[x - 1].text,
      imageUrl: this.shareAppInfo[x - 1].url,
      path:
        "/pages/entry/index?userId=" +
        this.appInfo.userId +
        "&subjectId=0&shareTickit=" +
        shareTickit,

      success: res => {
        this.fly
          .post("/updateStrength", {
            count: 30,
            type: 0
          })
          .then(res => {
            if (res.data.Result >= this.sysConfig.maxEnergy) {
              wx.showToast({
                title: "金币已达上限",
                icon: "none"
              });
            } else {
              wx.showToast({
                title: "分享成功,金币+30",
                icon: "none"
              });
            }
          });
      }
    };
  },
  components: {
    overFriendBox,
    checkModel
  },
  data() {
    return {
      userInfo: {},
      shareAppInfo: shareInfo,
      showOverFriendBox: false,
      showCheckModel: false,
      queryInfo: {
        userId: 0, //分享者id
        subjectId: 0
      },
      fromId: "",
      scene: 0 //场景值 1007 单人分享 1008 群分享 1036 APP分享（预留）
    };
  },

  computed: {
    ...mapState([
      "appInfo",
      "globalAudioContext",
      "globalAudioType",
      "tipEnergy",
      "myRank",
      "rankList",
      "loginReady",
      "isAuthorize",
      "initInfo",
      "cardNumber"
    ])
  },
  watch: {
    rankList(val) {
      if (val.length > 0) {
        this.showOverFriendBox = true;
      }
    },
    loginReady(val) {
      if (val) {
        if (
          this.$root.$mp.query.userId &&
          this.$root.$mp.query.subjectId != 0
        ) {
          this.$router.push(
            `/pages/question/sharePlay?userId=${
              this.$root.$mp.query.userId
            }&subjectId=${this.$root.$mp.query.subjectId}`
          );
        }
        // setTimeout(() => {
        //   console.log(this.initInfo)
        //   this.checkLocalDay(this.initInfo.signDay);
        // }, 100);
      }
      // this.$router.push(`/pages/question/sharePlay?userId=2&subjectId=33`);
    },
    initInfo() {
      this.checkLocalDay(this.initInfo);
      this.setCardNumber(this.initInfo.cardNumber);
    }
  },
  methods: {
    // msgSubmit(event) {  //模板消息
    //   this.formId = event.mp.detail.formId;
    //   console.log(this.formId)
    // },
    ...mapMutations([
      "setScene",
      "setUserInfo",
      "setGlobalAudioType",
      "setCardNumber"
    ]),
    toGame() {
      this.$router.push("/pages/game/index");
    },
    playAudio() {
      this.globalAudioContext.play();
      this.setGlobalAudioType("play");
    },
    stopAudio() {
      this.globalAudioContext.stop();
      this.setGlobalAudioType("stop");
    },
    getUserInfo(event) {
      //获取用户信息\
      if (this.initInfo.isPassed || this.cardNumber == 700) {
        wx.showToast({
          title: "您已通关,感谢支持",
          icon: "none"
        });
        return false;
      }
      let data = event.mp.detail.userInfo;
      if (this.isAuthorize == 0) {
        this.setUserInfo(data);
        wx.setStorage({
          key: "isAuthorize",
          data: "1"
        });
        this.store.commit("setAuthorize", 1);
        this.fly
          .post("/authorize", {
            nickName: data.nickName,
            avatarUrl: data.avatarUrl,
            gender: data.gender,
            city: data.city,
            province: data.province,
            country: data.country
            // userId: this.$route.query.userId, //0(自己登陆)，其他则是邀请打开 this.$route.query.userId
            // subjectId: this.$route.query.subjectId
          })
          .then(res => {
            this.$router.push("/pages/question/mainPlay");
          });
      } else {
        this.setUserInfo(data);
        this.$router.push("/pages/question/mainPlay");
      }
    },

    toRank() {
      this.$router.push("/pages/rank/rankList");
    },
    // 签到显示逻辑
    checkLocalDay(info) {
      if (info.isSigned == 1) {
        return;
      } else {
        this.showCheckModel = true;
      }
    },
    hideCheckModel() {
      this.showCheckModel = false;
    }
  }
};
</script>

<style lang="scss"  scoped>
.wrap {
  min-height: 100%;
  background-size: 750rpx 1206rpx;
  background-repeat: no-repeat;
  background-color: #fcda7b;
  background-image: url("");
}
.logo {
  width: 546rpx;
  height: 582rpx;
  display: block;
  padding-top: 64rpx;
  margin: 0 auto 20rpx 120rpx;
}
.btn-box {
  position: relative;
  margin: 0 auto;
  width: 630rpx;
  height: 250rpx;
  border: none;
  padding: 0;
  padding-top: 10rpx;
}
.btn-start,
.btn-rank {
  position: relative;
  margin: 0 auto;
  width: 589rpx;
  height: 200rpx;
  border: 8rpx solid #fff;
  border-radius: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 3rpx 3rpx 15rpx 7rpx #e7b068;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("");
  background-position: center;
  .icon-a,
  .icon-b {
    position: absolute;
    top: -5rpx;
    right: -23rpx;
    width: 275rpx;
    height: 220rpx;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url("");
  }
  .icon-b {
    top: 18rpx;
    background-image: url("");
  }
  .txt-nub {
    position: absolute;
    bottom: 0rpx;
    left: 42rpx;
    color: #fff;
    font-weight: bold;
    // line-height: 2rpx;
    span {
      color: #fcd45d;
      margin-right: 10rpx;
      font-size: 48rpx;
      font-weight: bold;
    }
  }
}
.btn-rank {
  background-image: url("");
}
.service {
  color: #c89143;
  border: none;
  line-height: 1;
  font-size: 28rpx;
}
.audio-icon {
  width: 44rpx;
  height: 47rpx;
  position: absolute;
  right: 30rpx;
  top: 30rpx;
}
.out-link {
  width: 154rpx !important;
  height: 180rpx !important;
  position: absolute;
  left: 20rpx;
  top: 480rpx;
}
</style>
